<template>
  <div class="container">
    <div class="background" style="width: 100%; height: 100%; background-color: rgba(230,204,233,0.5);">
      <vue-particles
          color="#555"
          :particleOpacity="0.7"
          :particlesNumber="150"
          shapeType="circle"
          :particleSize="4"
          linesColor="#555"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="2"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="false"
          clickMode="push"
          class="lizi"
      />
    </div>
    <div class="login-form">
      <div style="width: 100%; height: 100px; font-size: 30px; line-height: 100px; text-align: center; color: white">欢迎登录</div>
      <div style="margin-top: 25px; text-align: center; height: 320px">
        <el-form :model="form">
          <el-form-item>
            <el-input v-model="form.judUsername" prefix-icon="el-icon-user" style="width: 80%" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.judPassword" show-password prefix-icon="el-icon-lock" style="width: 80%" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 80%; background-color: #fca60b; margin-top: 10px" type="primary" @click="login()">登录</el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: right; color: white; position: relative; bottom: 10px; right: 15px">
          还没有账号?请<a href="/register">注册</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'Login',
  data() {
    return {
      form: {},
      role: ''
    }
  },
  // 页面加载的时候，做一些事情，在created里面
  created() {
      
  },
  // 定义一些页面上控件触发的事件调用的方法
  methods: {
    login() {
      request.post("/judge/login", this.form)
        .then(res => {
          if (res.code === 1) {
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            this.role = res.data.judRole;
            console.log(this.role);
            this.$router.push('/layout');
            /* window.location.assign("/showscore"); */
            localStorage.setItem("user", JSON.stringify(res.data));
           /*  this.$router.push('/layout'); */
          } else {
            this.$message({
              message: '用户名或密码错误',
              type: 'error'
            });
          }
        })
        /* .catch(error => {
          this.$message({
            message: error.response ? error.response.data : error.message,
            type: 'error'
          });
        }); */
    }
  }
}
</script>

<style scoped>
/* 基本样式 */
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(230,204,233,0.5);
  z-index: 0;
}

.login-form {
  position: relative;
  width: 400px;
  height: 350px;
  background-color: rgba(233, 156, 109, 0.5);
  border-radius: 10px;
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

/* 手机端样式 */
@media (max-width: 768px) {
  .login-form {
    width: 90%;
    height: auto;
    padding: 20px;
  }

  .login-form div:first-child {
    height: 50px;
    font-size: 24px;
    line-height: 50px;
  }

  .login-form div:nth-child(2) {
    margin-top: 20px;
  }

  .login-form .el-input {
    width: 100%;
  }

  .login-form .el-button {
    width: 100%;
  }

  .login-form div:last-child {
    text-align: center;
    bottom: 0;
    right: 0;
  }
}
</style>